﻿@inherits AdminCompontentBase

<SSheetDialog EnableDomReload @bind-Value=_visible Title="@T("Copy Department")" ContentClass="px-sheet-dialog">
    <MWindow @bind-Value="_step" Class="full-height">
        <MWindowItem Value="1" Class="full-height">
            <MCard Class="mx-auto d-flex flex-column full-height">
                <MCardText Class="d-flex align-center full-height">
                    <div class="full-width">
                        <div class="d-flex mb-12">
                            <div class="mx-auto">
                                <SNameTextField @bind-Value="@Dto.Name" Class="mb-12" style="width:323px;" HideDetails="@("auto")" Placeholder="@T("Enter Name")" />
                            </div>
                        </div>
                        <MCheckbox Class="d-flex justify-center" @bind-Value="@Dto.MigrateStaff" TValue="bool">
                            <LabelContent>
                                <span class="secondary--text">
                                    @T("Relocate former department staff")
                                </span>
                            </LabelContent>
                        </MCheckbox>
                    </div>
                </MCardText>
                <MCardActions class="d-flex justify-end mb-12 py-0">
                    <SButton Medium OnClick="NextStep">@T("Next step")</SButton>
                </MCardActions>
            </MCard>
        </MWindowItem>
        <MWindowItem Value="2" Class="full-height">
            <MCard Class="mx-auto d-flex flex-column full-height">
                <MCardText Class="d-flex flex-column full-height">
                    <div class="d-flex mb-12">
                        <div class="mx-auto">
                            <SNameTextField @bind-Value="@Dto.Name" HideDetails="@("auto")" style="width:323px;" Placeholder="@T("Enter Name")" />
                        </div>
                    </div>
                    <MCascader Items="Departments" Dense Label="@T("Location")"
                               ItemText="u => u.Name" @bind-Value="@Dto.ParentId" Class="mt-6"
                               ItemValue="u => u.Id" HideDetails="@("auto")" ChangeOnSelect
                               ItemChildren="u => u.Children">
                    </MCascader>
                    <div class="d-flex align-center mt-6">
                        <span class="h5 emphasis2--text">@T("Member")</span>
                        <MSpacer />
                        <SAutoComplete Items="_staffs"
                                       TItem="StaffSelectDto" TValue="Guid"
                                       TItemValue="StaffSelectDto"
                                       ItemText="r=>r.Name" NoFilter
                                       PrependInnerIcon="@IconConstants.Search"
                                       ItemValue="r=>r"
                                       Loading="_staffLoading"
                                       OnSearchInputUpdate="QueryStaff"
                                       HideDetails="true" HideSelected
                                       OnSelectedItemUpdate="AddStaff"
                                       Clearable
                                       Style="max-width:340px;"
                                       Label="@T("Search for members")">
                            <ItemContent Context="data">
                                <MListItem Style="max-width:340px;" Class="px-0">
                                    @if (!string.IsNullOrEmpty(data.Item?.Avatar))
                                    {
                                        <MListItemAvatar>
                                            <img src="@data.Item.Avatar">
                                        </MListItemAvatar>
                                    }
                                    <MListItemContent>
                                        <MListItemTitle>
                                            <span class="subtitle2 emphasis2--text">
                                                @data.Item?.DisplayName
                                            </span>
                                            <MDivider Vertical Class="mx-1" Style="@((!string.IsNullOrEmpty(data.Item?.DisplayName) && !string.IsNullOrEmpty(data.Item?.JobNumber))?"height:12px;":"height:0px;")" />
                                            <span class="caption regular2--text">
                                                @data.Item?.JobNumber
                                            </span>
                                        </MListItemTitle>
                                        <MListItemSubtitle>
                                            <span class="body2 regular2--text">
                                                @data.Item?.PhoneNumber
                                            </span>
                                            <MDivider Vertical Class="mx-1" Style="@((!string.IsNullOrEmpty(data.Item?.PhoneNumber) && !string.IsNullOrEmpty(data.Item?.Email))?"height:12px;":"height:0px;")" />
                                            <span class="body2 regular2--text">
                                                @data.Item?.Email
                                            </span>
                                        </MListItemSubtitle>
                                    </MListItemContent>
                                </MListItem>
                            </ItemContent>
                        </SAutoComplete>
                    </div>
                    <div class="mt-6" style="min-height:calc(100vh - 560px);overflow-y:auto;border: 1px solid #E2E7F4;border-radius: 8px;">
                        <MRow Class="mt-1 mb-0 mx-0">
                            @foreach (var staff in Dto.Staffs)
                            {
                                <MCol Md="3">
                                    <MHover Context="hoverComtext">
                                        <MListItem @attributes="hoverComtext.Attrs" Class="px-4" Style="@(hoverComtext.Hover?"background: #F6F8FD;border-radius: 8px;":"background:none")" Ripple=false>
                                            <MListItemAvatar MinHeight=40 MinWidth=40 Height=40 Width=40>
                                                <img src="@staff.Avatar" />
                                            </MListItemAvatar>
                                            <MListItemContent class="py-1">
                                                <MListItemTitle>
                                                    <span class="subtitle2 emphasis2--text">
                                                        @staff.DisplayName
                                                    </span>
                                                    <MDivider Vertical Class="mx-1" Style="@((!string.IsNullOrEmpty(staff.DisplayName) && !string.IsNullOrEmpty(staff.JobNumber))?"height:12px;":"height:0px;")" />
                                                    <span class="caption regular2--text">
                                                        @staff.JobNumber
                                                    </span>
                                                </MListItemTitle>
                                                <MListItemSubtitle>
                                                    <span class="body2 regular2--text">
                                                        @staff.PhoneNumber
                                                    </span>
                                                    <MDivider Vertical Class="mx-1" Style="@((!string.IsNullOrEmpty(staff.PhoneNumber) && !string.IsNullOrEmpty(staff.Email))?"height:12px;":"height:0px;")" />
                                                    <span class="body2 regular2--text">
                                                        @staff.Email
                                                    </span>
                                                </MListItemSubtitle>
                                            </MListItemContent>
                                            <div style="@(hoverComtext.Hover?"display:flex":"display:none")" class="align-center">
                                                <MButton Class="mr-4" Icon OnClick="()=>RemoveStaff(staff)">
                                                    <SIcon Size="24">mdi-close</SIcon>
                                                </MButton>
                                            </div>
                                        </MListItem>
                                    </MHover>
                                </MCol>
                            }
                        </MRow>
                    </div>
                    <MTextarea class="mt-6" @bind-Value="Dto.Description" Label="@T("Description")" Outlined Height="120" NoResize HideDetails="@("auto")" />
                </MCardText>
                <MCardActions class="d-flex align-center mb-10 px-6">
                    <EnableSwitch @bind-Value="Dto.Enabled" />
                    <MSpacer />
                    <SButton Medium Outlined OnClick="Return">@T("Previous step")</SButton>
                    <SButton Medium Disabled="@string.IsNullOrEmpty(Dto.Name.Trim())" OnClick="OnSubmitHandler">@T("Submit")</SButton>
                </MCardActions>
            </MCard>
        </MWindowItem>
    </MWindow>
</SSheetDialog>
